import React, { useState } from 'react';

import './App.css';

import Dialog from './Dialog';

import PortalDialog from './PortalDialog';

const App = () => {
  const [show1, setShow1] = useState(false);
  const [show2, setShow2] = useState(false);
  return (
    <div
      className="box"
      onClick={() => {
        console.log('box 监听的事件');
      }}
    >
      <div className="left"></div>
      <div className="right">
        <button
          type="button"
          onClick={() => setShow1(!show1)}
        >
          dialog
        </button>
        <button
          type="button"
          onClick={() => setShow2(!show2)}
        >
          PortalDialog
        </button>
        {/* 受父元素影响 */}
        {show1 && <Dialog onClose={() => setShow1(false)} />}

        {/* 传送 */}
        {show2 && <PortalDialog onClose={() => setShow2(false)} />}
      </div>
    </div>
  );
};

export default App;
